<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<style>
			.front,.back{
				width: 100%;height: 100%;position: absolute;
				left: 0;
				top: 0;
			}
			.steamgear
			{
				zoom:.5;
			}

			@keyframes rotate1
			{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(360deg);
				}
			}

			.rotate1
			{
				animation: rotate1;
				animation-duration: 4s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
				animation-fill-mode: forwards;
				animation-play-state:paused;
			}
			.rotate2
			{
				animation: rotate1;
				animation-duration: 4s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
				animation-direction: reverse;
				animation-fill-mode: forwards;
				animation-play-state:paused;
			}

			.gear1
			{

			}
			.gear2
			{
				
			}
			.imgButton
			{
				cursor: pointer;width:278px;height: 120px;
				transform: translateY(0px);
			}
			.imgButton:hover
			{
				transform: translateY(5px);
			}
		</style>
		<script src="js/zepto.js"></script>
		<script>
			const {shell,ipcRenderer} = require('electron');
			const package = require("./package.json");
			const bn = require('bytenode');
			const app = require('./app.js');

			function openExternal(url){
				shell.openExternal(url);
			}

			Zepto(function($){
				$("#version").text(package.version);
				$("#version").click(function(){
					ipcRenderer.send('openDevTools');
				});
			});
		</script>
	</head>
	<body>
		<div class='steamgear' style="width:600px;height:600px;">
			<div id='buttons' style="width: 100%;height:100%;position: absolute;z-index: 10;display: flex;flex-direction: column;align-items:center;justify-content:center;">
				<img class="imgButton" onclick="app.goJuejin()" src="images/btn_author.png" style="margin-top: 30px;"/>
				<img class="imgButton" onclick="app.convertUniapp()" src="images/btn_uniapp.png" style="margin-top: -30px;"/>
			</div>
			<div id='tips' style="-webkit-user-select: none;width: 100%;height:100%;position: absolute;z-index: 9;text-align: center;font-size: 30px;color:#fff;text-shadow: 0px 0px 3px #000;padding-top: 275px;">
				
			</div>
			<div id='version' style="cursor: pointer;-webkit-user-select: none;width: 100%;position: absolute;z-index: 10;text-align: center;font-size: 16px;color:#F8F5BD;text-shadow: 0px 0px 3px #000;bottom: 110px;"></div>
			<img src="images/front.png" class="front" style="z-index: 6;"/>
			<div style="width:101px;height: 101px;position: absolute;z-index:2;left:204px;top:292px;">
				<img src="images/gear_lb.png" class='rotate2 gear2 front'/>
				<img src="images/gear_lb_dot.png" class='front'/>
			</div>
			<div style="width:101px;height: 101px;position: absolute;z-index:5;left:308px;top:178px;">
				<img src="images/gear_lb.png" class='rotate1 gear1 front'/>
				<img src="images/gear_lb_dot.png" class='front'/>
			</div>
			<div style="width:149px;height: 149px;position: absolute;z-index:4;left:284px;top:262px;">
				<img src="images/gear_rb.png" class='rotate1 gear1 front'/>
				<img src="images/gear_rb_dot.png" class='front'/>
			</div>
			<div style="width:149px;height: 149px;position: absolute;z-index:3;left:180px;top:170px;">
				<img src="images/gear_rb.png" class='rotate2 gear2 front'/>
				<img src="images/gear_rb_dot.png" class='front'/>
			</div>
			<img src="images/back.png" class="back" style="z-index: 1;"/>
		</div>
		<div style="-webkit-app-region:drag;width: 100%;height: 80px;position: absolute;z-index: 99;background: rgba(0,0,0,0.01);left: 0;top:0;"></div>
		<div style="-webkit-app-region:drag;width: 80px;height: 100%;position: absolute;z-index: 99;background: rgba(0,0,0,0.01);left: 0;top:0;"></div>
		<div style="-webkit-app-region:drag;width: 80px;height: 100%;position: absolute;z-index: 99;background: rgba(0,0,0,0.01);right: 0;top:0;"></div>
	</body>
</html>
